<template>
  <el-container>
    <el-header>
      <h2>现场检查记录</h2>
    </el-header>
    <el-main>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="新建记录" name="create">
          <transition name="el-fade-in">
            <CreatePage @create="handleCreate" v-show="activeName=='create'" />
          </transition>
        </el-tab-pane>
        <el-tab-pane
          v-for="(record,index) in records"
          :key="index"
          :label="record.clientName"
          :name="record.clientName+index"
        >
          <transition name="el-fade-in">
            <RecordPage
              :recID="index"
              @dispose="handleDispose"
              v-show="activeName==record.clientName+index"
            />
          </transition>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>
      
<script>
import RecordPage from "./components/RecordPage";
import CreatePage from "./components/CreatePage";

export default {
  components: {
    RecordPage,
    CreatePage,
  },
  computed: {
    records() {
      return this.$store.state.record.inspect.liveRecord;
    },
  },
  data() {
    return {
      activeName: "",
    };
  },
  methods: {
    handleTabClick() {},
    handleDispose({ redID }) {
      this.$nextTick(() => {
        if (this.records.length > redID) {
          this.activeName = this.records[redID].clientName + redID;
        } else if (this.records.length > 0) {
          this.activeName =
            this.records[this.records.length - 1].clientName +
            (this.records.length - 1);
        } else {
          this.activeName = "create";
        }
      });
    },
    handleCreate() {
      this.$nextTick(() => {
        if (this.records.length > 0) {
          this.activeName =
            this.records[this.records.length - 1].clientName +
            (this.records.length - 1);
        } else {
          this.activeName = "create";
        }
      });
    },
  },
  created() {
    this.handleCreate();
  },
};
</script>
      
<style scoped>
</style>